/*
 * 消息管理
 * @author budao
 * @time 2019/05/13
 * @since 1.0.0
 * */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Modal,Row,Col,Spin} from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './messageListStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import FlagBtn from 'widget/FlagBtn/FlagView'
// import { download } from "utils/util"
const confirm = Modal.confirm;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { biz,shareModal,loading,typeOption,item}  = modelObj
  
  
  

  function detailModal(item){
    // console.log(item)
    updateModal(true)
    dispatch({
      type:`${namespace}/updateStore`,
      payload:{item:item}
    })
   
   
  }
  function updateModal(type){
    dispatch({
      type:`${namespace}/updateStore`,
      payload:{shareModal:type}
    })
  }
  // let typeOption = typeOption
  let sendStatus =[
    { value: '0', label: '不发送' },
    { value: '1', label: '发送成功' },
    { value: '2', label: '发送失败' },
  ]
  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: "admin/message/list",
      // 接口方式
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      app: "",
      // 接口参数
      params: "",
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'type',
            zh_name: '消息类型',
            elem_type: 'Select',
            cmpt_items:typeOption,
            elem_valid_type: 'string',
          },
          {
            en_name: 'mobile',
            zh_name: '接收人手机号',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'sendStatus',
            zh_name: '服务消息推送状态',
            elem_type: 'Select',
            cmpt_items:sendStatus,
            elem_valid_type: 'string',
          },
          {
            en_name: 'date',
            zh_name: '发送时间',
            elem_type: "Date",
            //format: "YYYY-MM-DD HH:mm",
            double: true,
            split_keys: ['startTime', 'endTime'],
            elem_valid_type: "string"
        },
        ],
        searchHandler: (e) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click',e)
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      "table":
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 1700 },
          fields: [
            {
              en_name: "title",
              zh_name: "消息标题",
              // width:190,
            },
            {
              en_name: "type",
              zh_name: "消息类型",
              // width:180,
              render: (a, item, index, d, e, f) => {
                let type = ["签约提醒","签约逾期提醒","房款逾期提醒","缴纳房款提醒","代收款项提醒"]
                return (
                  <span>{type[item.type-1]}</span>
                )
            }
            },
            {
              en_name: "mobile",
              zh_name: "接收人手机号",
            },
            {
              en_name: "createTime",
              zh_name: "发送时间",
              // width:110,
            },
            {
              en_name: "projectName",
              zh_name: "项目",
              // width:120,
              render:(a, item, index, d, e, f)=>{
                return item.params&&item.params.projectName&&item.params.projectName
              }
            },
            {
              en_name: "fullName",
              zh_name: "商品",
              // width:110,
              render:(a, item, index, d, e, f)=>{
                return item.params&&item.params.fullName&&item.params.fullName
              }
            },
            {
              en_name: "sendStatus",
              zh_name: "服务消息推送状态",
              width:100,
              render: (a, item, index, d, e, f) => {
                  let sendStatus = ["不发送","发送成功","发送失败"]
                  return (
                    <span>{sendStatus[item.sendStatus]}</span>
                  )
              }
            },
            {
              en_name: "readTime",
              zh_name: "阅读时间",
              // width:100,
            },
            {
              en_name: "errMsg",
              zh_name: "失败原因",
              // width:100,
            },
           
          ],
          // 表格操作
          actions: [
            {
              func_name:'content',
              render:(item)=> {
                return <FlagBtn  node={<a onClick={() => detailModal(item)}>消息详情</a>}></FlagBtn>
              }
            },
          ],
          action_props:{
            fixed: "right",
            width:90
          }
        },
     
    },
  }
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
      // console.log(biz)
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }
  
  return (
    <div>
      <Modal 
      title={`${item.title}`}
      visible={shareModal}
      onOk={()=>updateModal(false)}
      onCancel={()=>updateModal(false)}
      footer={null}
      >
      
          <Row>
            <Col style={{textAlign:'center'}}>
              <Spin spinning={loading} delay={500}></Spin>
            </Col>
            {!loading ?<Col>
            {/**1 签约提醒 */}
            {item.type==1&&<div>
              <p>尊敬的{item.params.customerName}女生/先生，</p>
              <p>{item.params.buildingName}提醒您，您于{item.params.buyDate}购买的{item.params.fullName}，</p>
              <p>按合同约定，您应于{item.params.signDate}签署《商品房买卖合同》，现逾期{item.params.exceedDay}天，将产生滞纳金，请您尽快带期相关资料前往营销中心签约。</p>
              <p>如有疑问请联系您的置业顾问{item.params.counselorName}{item.params.counselorMobile}，如已办理，请忽略。</p>
              </div>}
            {/**2 签约逾期提醒 */}
            {item.type==2&&<div>
              <p>尊敬的{item.params.customerName}女士/先生,</p>
              <p>{item.params.buildingName}提醒您,您于{item.params.buyDate}购买的{item.params.fullName}.</p>
              <p>按合同约定,您应于{item.params.signDate}签署《商品房买卖合同》，现已逾期{item.params.exceedDay}天，将产生滞纳金，请您尽快带齐相关资料前往营销中心签约。</p>
              <p>如有疑问请联系您的置业顾问{item.params.counselorName}{item.params.counselorMobile}，如已办理，请忽略。</p>
            </div>}
            {/**3 房款逾期提醒 */}
            {item.type==3&&<div>
              <p>尊敬的{item.params.customerName}女士/先生,</p>
              <p>{item.params.buildingName}提醒您，您于{item.params.buyDate}以{item.params.buyType}方式购买的{item.params.fullName}，截止{item.params.endDate}，楼款欠款金额为{item.params.oweCount
}元，现已逾期{item.params.exceedDay}天， 将产生滞纳金，请您尽快缴交。</p>
             <p>如有疑问请联系您的置业顾问{item.params.counselorName}{item.params.counselorMobile}，如已办理，请忽略。</p>
            </div>}
            {/**4 缴纳房款提醒 */}
            {item.type==4&&<div>
              <p>尊敬的{item.params.customerName}女士/先生,</p>
              <p>{item.params.buildingName}提醒您，您于{item.params.buyDate}以{item.params.buyType}方式购买的{item.params.fullName}，截止{item.params.endDate}，楼款欠款金额为{item.params.oweCount
}元，现已逾期{item.params.exceedDay}天， 将产生滞纳金，请您尽快缴交。</p>
             <p>如有疑问请联系您的置业顾问{item.params.counselorName}{item.params.counselorMobile}，如已办理，请忽略。</p>
            </div>}
            {/**5 代收款项提醒 */}
            {item.type==5&&<div>
              <p>{item.params.buildingName}提醒您有一笔{item.params.fundsName}{item.params.planAmountTotal}元需要交纳。请于{item.params.planReceiptDate
}前缴清，以免产生滞纳金。</p>
              <p>置业顾问：{item.params.counselorName}</p>
              <p>联系电话：{item.params.counselorMobile}</p>
              <p>如有疑问请联系您的置业顾问！</p>
            </div>}
           
            </Col>:null}
          </Row>
      </Modal>            
      <div className={cx('pageLayout')}>
        <ListPage pageProps={pageProps} />
        {/* {biz.tableData&& 
        <Row style={{position:'relative',bottom:'35px',left:'2.5%',color:'#666'}}>
          <span style={{display:'inline-block',marginRight:'10px'}}>已读：{biz.tableData.dataSource[0].readCount}</span>
          <span>未读：{biz.tableData.dataSource[0].noReadCount}</span>
        </Row>} */}
      </div>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))